<template>
  <div class="main-page">
    <div class="page-header">
      <div class="page-header-title">辽宁省房地产市场监测系统 —— 保交房情况</div>
      <div class="back-home-btn" @click="router.go(-1)">返回首页</div>
    </div>
    <div class="main-content">
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="module-item project-overview">
            <div class="module-item-title">
              <span>项目概况</span>
              <span>截止{{ new Date().getFullYear() }}年{{ new Date().getMonth() + 1 }}月数据</span>
            </div>
            <div class="module-item-content">
              <el-row justify="space-between">
                <el-col :span="7">
                  <div class="project-overview-item">
                    <span>项目个数</span>
                    <span style="color: #60F9F4;">{{ projectOverviewObj.proNum || '--' }}</span>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="project-overview-item">
                    <span>房屋套数</span>
                    <span style="color: #60F9F4;">{{ projectOverviewObj.fwts || '--' }}</span>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="project-overview-item">
                    <span>总面积</span>
                    <span style="color: #60F9F4;">{{ projectOverviewObj.zmj || '--' }}万㎡</span>
                  </div>
                </el-col>
              </el-row>
              <el-row justify="space-between">
                <el-col :span="7">
                  <div class="project-overview-item">
                    <span>已交付项目个数</span>
                    <span style="color: #5ABE52;">{{ projectOverviewObj.jfxms || '--' }}</span>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="project-overview-item">
                    <span>已交付房屋套数</span>
                    <span style="color: #5ABE52;">{{ projectOverviewObj.jffwts || '--' }}</span>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="project-overview-item">
                    <span>已交付面积</span>
                    <span style="color: #5ABE52;">{{ projectOverviewObj.jfmj || '--' }}万㎡</span>
                  </div>
                </el-col>
              </el-row>
              <el-row justify="space-between">
                <el-col :span="11">
                  <div class="project-overview-item">
                    <span>项目销号率</span>
                    <span style="color: #FADA4C;">{{ projectOverviewObj.proRate || '--' }}%</span>
                  </div>
                </el-col>
                <el-col :span="11">
                  <div class="project-overview-item">
                    <span>房屋交付率</span>
                    <span style="color: #FADA4C;">{{ projectOverviewObj.tsRate || '--' }}%</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="module-item every-city-delivered-house-ranking">
            <div class="module-item-title">
              <span>各城市交付排名</span>
              <el-tabs class="module-item-title-tabs" v-model="everyCityDeliveredHouseRankingTab"
                       @tab-change="changeTab($event, 'everyCityDeliveredHouseRankingTab')">
                <el-tab-pane v-for="(item, index) of everyCityDeliveredHouseRankingTabs" :key="item.value"
                             :label="item.label"
                             :name="item.value"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <el-row class="table-head">
                <el-col :span="2">排名</el-col>
                <el-col :span="4">城市</el-col>
                <el-col :span="14"></el-col>
                <el-col :span="4">{{ everyCityDeliveredHouseRankingColumn }}</el-col>
              </el-row>
              <div class="table-content">
                <vue3-seamless-scroll :list="everyCityDeliveredHouseRankingList" direction="up" :hover="true"
                                      :limitScrollNum="1" :step="step" wheel :copyNum="0"
                                      class="seamless-wrap">
                  <div v-for="(item, index) in everyCityDeliveredHouseRankingList" :key="index">
                    <el-row>
                      <el-col :span="2">{{ index + 1 }}</el-col>
                      <el-col :span="4">{{ item.name }}</el-col>
                      <el-col :span="14">
                        <div class="bar">
                          <div class="bar-item"
                               :style="{ width: `${(item.value / everyCityDeliveredHouseRankingMax) * 100}%` }"></div>
                        </div>
                      </el-col>
                      <el-col :span="4">{{ item.value }}</el-col>
                    </el-row>
                  </div>
                </vue3-seamless-scroll>
              </div>
            </div>
          </div>
          <div class="module-item every-city-delivered-rate-ranking">
            <div class="module-item-title">
              <span>各城市交付率排名</span>
            </div>
            <div class="module-item-content">
              <el-row class="table-head">
                <el-col :span="2">排名</el-col>
                <el-col :span="4">城市</el-col>
                <el-col :span="14"></el-col>
                <el-col :span="4">交付率</el-col>
              </el-row>
              <div class="table-content">
                <vue3-seamless-scroll :list="everyCityDeliveredRateRankingList" direction="up" :hover="true"
                                      :limitScrollNum="1" :step="step" wheel :copyNum="0"
                                      class="seamless-wrap">
                  <div v-for="(item, index) in everyCityDeliveredRateRankingList" :key="index">
                    <el-row>
                      <el-col :span="2">{{ index + 1 }}</el-col>
                      <el-col :span="4">{{ item.name }}</el-col>
                      <el-col :span="14">
                        <div class="bar">
                          <div class="bar-item"
                               :style="{ width: `${item.value}%` }"></div>
                        </div>
                      </el-col>
                      <el-col :span="4">{{ item.value }}%</el-col>
                    </el-row>
                  </div>
                </vue3-seamless-scroll>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <el-row ref="viewerContainer" class="demo-viewer map" style="position: relative">
            <vc-viewer :logo="false" @ready="vcViewerReady">
              <vc-overlay-html
                v-for="(item, index) in pointList"
                :key="index"
                :position="{ lng: item.x, lat: item.y }"
                :style="{ 'pointer-events': pointerEvents }"
                @wheel="handleWheel"
              >
                <div class="point-item">
                  <el-image style="width: 36px; height: 36px"
                            :src="item.isChoose ? locationChosen : pointImgUrlFunc(item)" :fit="fit"/>
                </div>
              </vc-overlay-html>
            </vc-viewer>
            <div class="map-back-origin" @click="mapBackOrigin">回到初始状态</div>
          </el-row>
          <div class="module-item project-delivery-risk-monitoring">
            <div class="module-item-title">
              <span>项目交付风险监测</span>
            </div>
            <div class="module-item-content">
              <div class="top-filtrate-content">
                <el-tabs class="top-filtrate-content-tabs" v-model="projectDeliveryRiskMonitoringTab"
                         @tab-change="changeTab($event, 'projectDeliveryRiskMonitoringTab')">
                  <el-tab-pane v-for="(item, index) of projectDeliveryRiskMonitoringTabs" :key="item.value"
                               :label="item.label"
                               :name="item.value"></el-tab-pane>
                </el-tabs>
                <div class="top-filtrate-content-info">
                  <span>项目总数：<span style="color: #60F9F4">{{ tableInfo.projectSumNum }}</span></span>
                  <span>面积：<span style="color: #5ABE52">{{ tableInfo.acreage }}万㎡</span></span>
                  <span>套数：<span style="color: #FADA4C">{{ tableInfo.houseNum }}</span></span>
                </div>
                <div class="city-project-filtrate">
                  <public-change-province-city
                    :cityList="provinceCitySelectList"
                    :currentCity="provinceCitySelectValue.code"
                    @changeCity="changeCity"
                  />
                  <el-input class="city-project-filtrate-project-name" v-model="projectName"
                            placeholder="请输入项目名称" size="small" clearable/>
                  <div class="city-project-filtrate-btn" @click="searchProject">搜索</div>
                </div>
              </div>
              <div class="module-item-content-table">
                <table-list :tableData="tableListData" :tablePaginationInfo="tableInfo" @tableRowClick="tableRowClick"
                            :columnData="tableColumnData" @changePageNum="changeTablePage"
                            @cameraFlyTo="prepareForCameraFly"
                ></table-list>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, onUnmounted, ref, shallowRef} from "vue";
import {useRouter} from "vue-router";
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
import publicChangeProvinceCity from "@/components/housePropertyDevelopmentConstruction/publicChangeProvinceCity.vue";
import tableList from "@/components/guaranteeDeliveryHouseCondition/tableList.vue";
import {
  constructionGetBjlProject, // 保交房情况-项目概况
  constructionGetBjlProjectRanking, // 保交房情况-各城市交付套数排名
  constructionGetProjectRate, // 保交房情况-各城市交付率排名
  constructionGetProjectFxjc, // 保交房情况-项目交付风险监测
  constructionGetProjectLocation, // 保交房情况-获取所有项目经纬度
} from '@/api/guaranteeDeliveryHouseCondition/index'
import locationRed from '@/assets/img/guaranteeDeliveryHouseCondition/locationRed.png'
import locationYellow from '@/assets/img/guaranteeDeliveryHouseCondition/locationYellow.png'
import locationGreen from '@/assets/img/guaranteeDeliveryHouseCondition/locationGreen.png'
import locationChosen from '@/assets/img/guaranteeDeliveryHouseCondition/locationChosen.png'

const router = useRouter();

const projectOverviewObj = ref({}) // 项目概括

const VCCesium = shallowRef(null); // 原生cesium实例
const VCViewer = shallowRef(null); // vue-cesium-viewer实例
const scrollTimer = ref(null);
const pointerEvents = ref("auto");

const pointList = ref([]) // 点list
const everyCityDeliveredHouseRankingList = ref([]) // 各城市交付套数排名list
const everyCityDeliveredRateRankingList = ref([]) // 各城市交付率排名list
const step = ref('0')
const everyCityDeliveredHouseRankingColumn = ref('交付套数') // 各城市交付排名-动态变动列名
const everyCityDeliveredHouseRankingTab = ref(1) // 各城市交付套数排名tab-value
const everyCityDeliveredHouseRankingTabs = ref([ // 各城市交付套数排名tabs
  {
    label: '交付套数',
    value: 1
  },
  {
    label: '交付面积',
    value: 2
  }
])
const projectDeliveryRiskMonitoringTab = ref('all') // 项目交付风险监测tab-value
const projectDeliveryRiskMonitoringTabs = ref([ // 项目交付风险监测tabs
  {
    label: '全部',
    value: 'all'
  },
  {
    label: '近3个月交付',
    value: 1
  },
  {
    label: '近2个月交付',
    value: 2
  },
  {
    label: '近1个月交付',
    value: 3
  },
  {
    label: '已经延期',
    value: 4
  },
])
const provinceCitySelectValue = ref({
  name: '',
  code: '210000'
})
const provinceCitySelectList = ref([
  {name: '辽宁省', code: '210000'},
  {name: '沈阳市', code: '210100'},
  {name: '大连市', code: '210200'},
  {name: '鞍山市', code: '210300'},
  {name: '抚顺市', code: '210400'},
  {name: '本溪市', code: '210500'},
  {name: '丹东市', code: '210600'},
  {name: '锦州市', code: '210700'},
  {name: '营口市', code: '210800'},
  {name: '阜新市', code: '210900'},
  {name: '辽阳市', code: '211000'},
  {name: '盘锦市', code: '211100'},
  {name: '铁岭市', code: '211200'},
  {name: '朝阳市', code: '211300'},
  {name: '葫芦岛市', code: '211400'}
])
const projectName = ref('') // 项目交付风险监测-项目名称搜素
const tableListData = ref([]) // 列表tablelist
const tableColumnData = ref([]) // 列表columnlist
const tableInfo = ref({ // 列表-分页-table信息
  total: 0,
  pageNum: 1,
  pageSize: 7,
  projectSumNum: '',
  acreage: '',
  houseNum: '',
})

const everyCityDeliveredHouseRankingMax = computed(() => { // 各城市交付套数排名-value最大值
  const tempValueList = everyCityDeliveredHouseRankingList.value.map(x => x.value)
  return Math.max(...tempValueList)
})

const handleScroll = (timer, pointerEvents, timeout) => { // 滚动样式设置
  if (timer.value) {
    clearTimeout(timer.value);
  }
  pointerEvents.value = "none";
  timer.value = setTimeout(() => {
    pointerEvents.value = "auto";
  }, timeout);
};

const handleWheel = () => {
  handleScroll(scrollTimer, pointerEvents, 800);
};

const vcViewerReady = ({Cesium, viewer}) => { // gis初始化
  VCCesium.value = Cesium;
  VCViewer.value = viewer;
  // 去除水印
  viewer._cesiumWidget._creditContainer.style.display = "none";
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(123.4, 41.8, 70 * 10000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0,
    },
  });
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 70 * 10000;
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0;
  viewer.scene.screenSpaceCameraController.enableTilt = false; // 禁止地图倾斜（旋转）功能
  //  加载离线地图
  viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      // url: "http://192.168.30.225:8088/mapsatellite/{z}/{x}/{y}.jpg", //卫星地图
      url: "http://192.168.30.225:8088/map/{z}/{x}/{y}.png", //二维地图
      fileExtension: "png",
    })
  );
}

const calculateStep = () => {
  // 获取视口的高度
  const viewportHeight = window.innerHeight;
  step.value = viewportHeight * 0.0003;
};

const changeTab = (event, module) => { // 公共-tabs切换
  switch (module) {
    case 'everyCityDeliveredHouseRankingTab': // 各城市交付套数排名
      everyCityDeliveredHouseRankingColumn.value = everyCityDeliveredHouseRankingTabs.value.find(x => x.value === event).label
      getEveryCityDeliveredHouseRankingList();
      break;
    case 'projectDeliveryRiskMonitoringTab': // 项目交付风险监测
      tableInfo.value.pageNum = 1
      initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
      break;
  }
}

const changeCity = (cityCode) => { // 模块切换城市
  provinceCitySelectValue.value.code = cityCode
  tableInfo.value.pageNum = 1
  initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
}

const changeTablePage = (page) => { // 列表-切换
  tableInfo.value.pageNum = page
  initTableList({pageNum: page, pageSize: tableInfo.value.pageSize});
}

const initTableList = (pageInfo) => { // table
  tableColumnData.value = [
    {
      label: '序号',
      key: 'index',
      width: 40
    },
    {
      label: '项目名称',
      key: 'bjfxtxmmc'
    },
    {
      label: '所在县区',
      key: 'xzqhmc'
    },
    {
      label: '开发企业名称',
      key: 'kfqymc'
    },
    {
      label: '房企属性',
      key: 'companyProperty'
    },
    {
      label: '项目分档',
      key: 'xmfd'
    },
    {
      label: '套数',
      key: 'bjfmbts'
    },
    {
      label: '已交付套数',
      key: 'bjfwcts'
    },
    {
      label: '交付率',
      key: 'jfl'
    },
    {
      label: '合同约定交付时间',
      key: 'htydjfrq',
    },
    {
      label: '计划交付时间',
      key: 'jhjfsj'
    },
    {
      label: '交付状态',
      key: 'jfzt'
    },
  ]

  constructionGetProjectFxjc({
    xzqhdm: provinceCitySelectValue.value.code,
    requestType: projectDeliveryRiskMonitoringTab.value === 'all' ? undefined : projectDeliveryRiskMonitoringTab.value,
    pageSize: pageInfo.pageSize,
    pageNum: pageInfo.pageNum,
    projectName: projectName.value || ''
  }).then(res => {
    if (res && res.data) {
      const resData = res.data
      tableInfo.value.projectSumNum = resData.xmzs
      tableInfo.value.acreage = resData.mj
      tableInfo.value.houseNum = resData.mbts
      tableListData.value = resData.list?.map((x, i) => {
        return {
          ...x,
          index: (pageInfo.pageNum - 1) * pageInfo.pageSize + (i + 1)
        }
      })
      tableInfo.value.total = resData.total
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
  })
}

const getProjectOverview = () => { // 项目概括-getdata
  constructionGetBjlProject().then(res => {
    if (res && res.data) {
      const resData = res.data
      projectOverviewObj.value = resData
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
  })
}

const getEveryCityDeliveredHouseRankingList = () => { // 各城市交付套数排名-getdata
  everyCityDeliveredHouseRankingList.value = []
  constructionGetBjlProjectRanking({
    requestType: everyCityDeliveredHouseRankingTab.value
  }).then(res => {
    if (res && res.data) {
      const resData = res.data
      everyCityDeliveredHouseRankingList.value = resData
    }
  }).catch(err => {
    console.log(err);
  })
}

const getEveryCityDeliveredRateRankingList = () => { // 各城市交付率排名-getdata
  constructionGetProjectRate().then(res => {
    if (res && res.data) {
      const resData = res.data
      everyCityDeliveredRateRankingList.value = resData
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
  })
}

const searchProject = () => { // 搜索项目
  tableInfo.value.pageNum = 1
  initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
}

const prepareForCameraFly = (row) => { // 准备相机飞跃
  cameraFlyTo([row.jd, row.wd], 2 * 10000);
}

const cameraFlyTo = (coord, height) => {
  VCViewer.value.camera.flyTo({
    destination: VCCesium.value.Cartesian3.fromDegrees(coord[0], coord[1], height),
    orientation: {
      heading: VCCesium.value.Math.toRadians(0),
      pitch: VCCesium.value.Math.toRadians(-90),
      roll: 0.0,
    },
    duration: 0.5, // 飞行动画的持续时间，单位为秒
  });
};

const mapBackOrigin = () => { // 地图回到初始状态
  tableListData.value.forEach(x => {
    x.isChoose = false
  })
  pointList.value.forEach(x => {
    x.isChoose = false
  })
  cameraFlyTo([123.4, 41.8], 70 * 10000);
}

const tableRowClick = (row) => { // 行点击
  tableListData.value.forEach(x => {
    x.isChoose = false
  })
  row.isChoose = true
  pointList.value.forEach(x => {
    x.isChoose = false
  })
  const choosePoint = pointList.value.find(x => x.id === row.id)
  if (choosePoint) choosePoint.isChoose = true
}

const getMapPoints = (row) => { // 获取地图点位
  constructionGetProjectLocation().then(res => {
    if (res && res.data) {
      const resData = res.data
      const tempList = resData.filter(x => x.jd && x.wd)
      pointList.value = tempList.map(x => {
        return {
          ...x,
          x: x.jd,
          y: x.wd,
          isChoose: false
        }
      })
    }
  }).catch(err => {
    console.log(err);
  })
}

const pointImgUrlFunc = (item) => { // 地图图标方法
  switch (item.xmfd) {
    case '红档项目':
      return locationRed
    case '黄档项目':
      return locationYellow
    case '绿档项目':
      return locationGreen
  }
}

const initPage = () => {
  getProjectOverview() // 项目概括
  getEveryCityDeliveredHouseRankingList() // 各城市交付套数排名
  getEveryCityDeliveredRateRankingList() // 各城市交付率排名
  initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
  getMapPoints();
}

onMounted(() => {
  calculateStep();
  window.addEventListener("resize", calculateStep);

  initPage();
});
onUnmounted(() => {
  window.removeEventListener("resize", calculateStep);
});
</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyDevelopmentConstruction/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;
    background-image: url("@/assets/img/housePropertyDevelopmentConstruction/header-bg.png");
    background-size: 100% 100%;

    &-title {
      position: absolute;
      left: 50px;
      font-size: 35px;
      color: #A6EDFF;
      text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .back-home-btn {
      position: absolute;
      top: 52px;
      right: 50px;
      font-size: 20px;
      color: #7bebed;
      cursor: pointer;
    }
  }

  .main-content {
    padding: 0 20px;

    .point-item {
      position: relative;
      bottom: 18px;
    }

    .module-item {
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-header-bg.png");
        background-size: 100% 100%;

        > span {
          font-size: 15px;
          color: white;
          margin-left: 40px;
        }
      }

      &-content {
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-content-bg.png");
        background-size: 100% 100%;
      }
    }

    :deep(.el-tabs) {
      display: flex;
      align-items: center;

      .el-tabs__header {
        margin: 0;
      }

      .el-tabs__nav-wrap:after {
        height: 0;
      }

      .el-tabs__active-bar {
        height: 0;
      }

      .el-tabs__item {
        width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        font-size: 12px;
        height: 20px;
        cursor: pointer;
        color: white;
        background: rgb(9, 31, 63);
      }

      .el-tabs__item.is-active {
        background: #2187F4;
      }
    }

    .project-overview {
      height: 290px;
      margin-bottom: 20px;

      .module-item-content {
        padding: 20px 30px;

        .el-row:not(:last-child) {
          margin-bottom: 10px;
        }
      }

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 70px;
        background-image: url("@/assets/img/guaranteeDeliveryHouseCondition/module-bg-new.png");
        background-size: 100% 100%;

        span:first-child {
          font-size: 16px;
        }

        span:last-child {
          font-size: 23px;
          font-weight: bolder;
        }
      }
    }

    .every-city-delivered-house-ranking, .every-city-delivered-rate-ranking {
      height: 315px;
      overflow: hidden;
      margin-bottom: 20px;

      .module-item-title {
        position: relative;

        &-tabs {
          position: absolute;
          right: 50px;
        }

        /deep/ .el-tabs__item {
          width: 70px;
        }
      }

      .module-item-content {
        height: 295px;
        padding-bottom: 10px;

        .table-head {
          height: 15%;
          font-size: 16px;
          padding: 10px 0;

          .el-col:nth-of-type(1) {
            padding-left: 10px;
          }

          .el-col:nth-of-type(2) {
            padding-left: 5px;
          }
        }

        .table-content {
          height: 85%;
          font-size: 15px;

          .el-col:nth-of-type(1) {
            text-align: center;
          }

          .el-col {
            margin-bottom: 10px;
          }

          .seamless-wrap {
            height: 100%;
            overflow: hidden;

            > div > div > div:first-child {
              padding-top: 20px;
            }

            > div > div > div:last-child {
              padding-bottom: 20px;
            }
          }

          .table-loading {
            /deep/ .el-loading-mask {
              background-color: transparent;
            }
          }

          .bar {
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            width: 85%;
            height: 14px;
            margin-left: 0px;

            .bar-item {
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              background: linear-gradient(90deg, #27F8FC 0%, #0271BC 100%);
            }
          }
        }
      }
    }

    .every-city-delivered-rate-ranking {
      margin-bottom: 0;
    }

    .map {
      height: 622px;
      overflow: hidden;

      .map-back-origin {
        position: absolute;
        right: 5px;
        bottom: 5px;
        font-size: 16px;
        color: white;
        height: auto;
        padding: 5px 10px;
        border-radius: 5px;
        background: #204485;
        box-shadow: inset 0 0 0.04167rem 0 #3D7FFF;
        border: 0.00521rem solid #67BAEF;
        cursor: pointer;
        z-index: 2;
      }

      .vc-html-container {
        z-index: 1;
      }
    }

    .project-delivery-risk-monitoring {
      position: relative;
      margin-top: 20px;
      height: 315px;
      z-index: 2;

      .module-item-content {
        padding-top: 10px;
        height: 295px;

        .top-filtrate-content {
          display: flex;
          align-items: center;
          padding: 10px 0;

          :deep(.el-tabs) {
            position: absolute;
            left: 20px;

            .el-tabs__item {
              font-size: 14px;
              height: 22px;
              box-shadow: inset 0px 0px 8px 0px #3D7FFF;
              border-radius: 2px;
              padding: 0 10px;
              width: auto;
            }

            .el-tabs__item:not(:last-child) {
              margin-right: 10px;
            }

            .el-tabs__item.is-active {
              background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
            }
          }

          &-info {
            position: absolute;
            left: 42%;
            font-size: 16px;
            background-color: #00FDFF33;
            padding: 2px 10px;

            span {
              font-weight: bolder;
            }

            span:not(:last-child) {
              margin-right: 10px;
            }
          }

          .city-project-filtrate {
            position: absolute;
            right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            .filtrate-city {
              min-width: 100px;
              width: 100px;
              margin-right: 10px;

              /deep/ .el-select__wrapper {
                font-size: 15px;
              }
            }

            &-project-name {
              width: 140px;

              /deep/ .el-input__wrapper {
                background: #204485;
                box-shadow: inset 0 0 0.04167rem 0 #3D7FFF;
                border: 0.00521rem solid #67BAEF;

                .el-input__inner {
                  color: white;
                  font-size: 14px;
                }

                .el-range-input, .el-range-separator {
                  color: white;
                }

                input::placeholder {
                  color: #D7DDE2 !important;
                }
              }
            }

            &-btn {
              display: flex;
              align-items: center;
              justify-content: center;
              box-sizing: border-box;
              margin-left: 10px;
              background: #204485;
              width: 44px;
              height: 26px;
              border-radius: 5px;
              cursor: pointer;
              box-shadow: inset 0 0 0.04167rem 0 #3D7FFF;
              border: 0.00521rem solid #67BAEF;
            }
          }
        }

        &-table {
          width: 100%;
          height: 245px;
          padding: 10px 3px;

          /deep/ .table-row {
            height: 38px;
          }

          /deep/ .el-table__empty-block {
            height: 180px !important;
          }
        }
      }
    }
  }
}
</style>